<template>
  <div class="container">
    <el-card shadow="always">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-date-picker
            v-model="query.quickCheckDate"
            type="date"
            :clearable="false"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="2">
          <el-button
            type="primary"
            @click="
              query.page = 1;
              getList();
            "
            >查询</el-button
          >
        </el-col>
      </el-row>
      <rz-height></rz-height>

      <el-row :gutter="20">
     <el-col :span="6">
        总批次数:{{tableData.quickCount}}
     </el-col>
        <el-col :span="6" class="green">
          阴性(未检出数): {{tableData.quickWjc}}
     </el-col>
        <el-col :span="6" class="red">
          疑似阳性数: {{tableData.quickYsyx}}
     </el-col>
        <el-col :span="6" class="red">
           阳性数: {{tableData.quickYx}}
     </el-col>
      </el-row>

      <rz-height></rz-height>

      <el-table
        :data="tableData.itemList"
        border
        style="width: 100%"
      >
        <el-table-column prop="quickCheckDateStr" label="检测时间">
        </el-table-column>
        <el-table-column
          prop="tablewareName"
          label="餐具名称"
        >
         <template slot-scope="scope">
            <div :class="[scope.row.quickCheckResult=='+'?'red':'green']">{{  scope.row.quickCheckResult=='+'?'疑似阳性':'阴性'  }}</div>
          </template>
        
        </el-table-column>
        <el-table-column
          prop="quickCheckSubitemName"
          label="检测项目"
        ></el-table-column>
        <el-table-column
          prop="salesSubitemName"
          label="品种名称"
        ></el-table-column>
        <el-table-column
          label="实测值"
        >
         <template slot-scope="scope">
            <div >{{ scope.row.quickCheckResultvalue+scope.row.quickCheckResultvalueunit}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="quickCheckResultvalueckarea"
          label="范围值"
        ></el-table-column>
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="view(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- <pagination
        :total="total"
        @pagination="getList"
        :page.sync="query.page"
      /> -->
    </el-card>

    <rz-dialog
      :dialogVisible.sync="dialogVisible"
      :isShowConfirm="false"
      title="查看消毒记录"
    >
      <el-form label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="检测时间">
              {{ data.quickCheckDateStr }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检测项目">
              {{ data.quickCheckItemName+'->'+data.quickCheckSubitemName }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="品种名称">{{
              data.salesSubitemName
            }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检测结果" :class="[data.quickCheckResult=='+'?'red':'green']">
              {{ data.quickCheckResult=='+'?'疑似阳性':'阴性'   }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="检测依据">
            {{  data.quickCheckResultdependon?data.quickCheckResultdependon:'--'  }}</el-form-item
            >
          </el-col>
          <el-col :span="12">
            <el-form-item label="产地">
              {{ data.productionFrom }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="检测人">
              {{ data.queckReChecker }}</el-form-item
            >
          </el-col>
          <el-col :span="12">
            <el-form-item label="检测设备">
              {{data.jcManuFactor+'('+data.jcModel +')' }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </rz-dialog>
  </div>
</template>
<script>
import calendar from "@/views/enterprise/components/calendar";
import { SsaQuickCheck } from "@/api/modules/enterprise";
export default {
  // props:[],
  // 页面加载
  created() {
    this.getList();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      query: {
        isPage: 0,
        page: 1,
        pageSize: 10,
        quickCheckDate: this.$moment().format('YYYY-MM-DD'),
        unitId: sessionStorage.getItem("interpretation"),
      },
      // tableData: [],
      // total: 0,
      dialogVisible: false,
      data: {},
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      tableData:{}
    };
  },
  // 方法
  methods: {
    getList() {
      SsaQuickCheck(this.query).then(
        (res) => {
          // this.total = res.totalCount;
          this.tableData = res.data;
        }
      );
    },
    view(e) {
      this.data = e;
      this.dialogVisible = true;
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: { calendar },
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>

</style>